<!doctype html> 
<html>
<head> 
 <meta charset=utf-8>
    <title>Meyer Web's Color Blender</title>
    <style type="text/css">
*{margin:0; padding:0}
html { background: #F9F9F9; } 
body { padding: 1% 1em; height: 98%; background: #FFF; color: #999; font: 100%/1.25 Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;}
form {margin: 0;}
h1 { font-size: 1.75em; line-height: 0.85em; margin-bottom: 0.33em; padding-bottom: 0; font-family: Corbel, "Lucida Grande", "Lucida Sans", Tahoma, "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;}
h1 a { color: #666; }
#main {border-bottom: 1px solid #CCC; padding-bottom: 0.5em; margin-bottom: .5em;}

#uicell {width: 25em;}
#uicell th {width: 6em; text-align: right; padding-right: 0.5em; border: 1px solid #CCC; border-width: 0 1px 1px 0;}
#uicell td {padding: 0 0 0 0.5em;}
#uicell td.pal {padding: 0 3em;}
#uicell #gobuttons td {height: 1.5em;}

input, #input a { font: .875em  Monaco, 'DejaVu sans Mono', Consolas, "Andale Mono", Courier, monospace;}
#input, #output {margin: 0 0 1em; }

#input td {white-space: nowrap;}
#input a {border: 2px outset #CCC; background: #CCC; color: #333; padding: 1px .25em; cursor: pointer;}
#input a:hover {background-color: #90C55C;border-color: #54822C;}

#input .coltype {background: #EEE; border-style: inset;}

#output input {border: 2px solid white; border-width: 0 2px;}
#output td.text {border-bottom: 1px dotted #CCC;}

#watercell {width: 75px; background: #CCC; padding: 0;} 
#grid {background: black; border: 1px solid black; border-width: 0 1px 1px 0; margin: 5px 4px;}
#grid td {height: 11px; width: 11px; padding: 0; line-height: 11px;}
#grid td a {display: block; height: 10px; width: 10px; line-height: 10px; border: 1px solid black; border-width: 1px 0 0 1px;}  

/* #textcell li {margin: 0; padding: 0 1em 1em 1.5em; font-size: .8em; color: #999; list-style-type: none; }
#textcell p {margin: 0; padding: 0 1em 1em 1.5em;}  */
.valign-top { vertical-align: top; }
.intro, #footer, .textcell li {font-size: .875em;} 
.intro { line-height: 1.25; padding: .5em 0; }
.textcell li {margin: 0; padding: 0 1em 1em 1.5em;  list-style-type: none; }
#footer p {margin: 0 1.5em 1em; font-style: italic; }
#footer img {float: right; margin: 0 0 0.5em 2em;}

.cf:before, .cf:after { content:""; display:table; } 
.cf:after { clear:both; } 
a:link { color: #C30; text-decoration: none; border-bottom: 1px solid transparent; cursor: pointer; }
a:visited { color: #54C; }
a:hover { color: #429; border-bottom-color: #429; }
a:active { position: relative; top: 1px; }

@media only screen and (min-width: 992px){ 
    html { background: #F9F9F9 url(); } /* http://www.patternify.com/ */ 
    body { width: 90%; margin: 1em auto 0;  border: 1px solid #DDD; box-shadow: 4px 10px 18px rgba(0,0,0,.25); } 
    .unit { float: left; }
    .size1of2 { width: 50%;  }
    .group { width: 100%;  } 
    #grid td {height: 16px; width: 16px; line-height: 16px;}
    #grid td a {height: 15px; width: 15px; line-height: 15px;}
    .textcell { margin-top: 2.5em; }
}
@media only screen and (min-width: 1382px){ 
     body { width: 75%; } 
} 
@media only screen and (min-width: 1500px){ 
    body { width: 62.5%; } 
}
@media only screen and (min-width: 1800px){ 
    body { width: 50%; } 
}
	</style>

    <script type="text/javascript">
        // Thanks to Steve Champeon (hesketh.com) for explaining the math in such a way that I could 
        // understand it and create this tool
        // Thanks to Roberto Diez for the idea to create the "waterfall" display
        // Thanks to the Rhino book, I was able to (clumsily) set up the Color object

        var cursor = 0;
        var colType = 'hex';
        var base = 16;
        var ends = new Array(new Color, new Color);
        var step = new Array(3);
        var palette = new Array(new Color, new Color, new Color, new Color, new Color, new Color, new Color, new Color, new Color, new Color, new Color, new Color);

        function GetElementsWithClassName(elementName, className) {
            var allElements = document.getElementsByTagName(elementName);
            var elemColl = new Array();
            for (i = 0; i < allElements.length; i++) {
                if (allElements[i].className == className) {
                    elemColl[elemColl.length] = allElements[i];
                }
            }
            return elemColl;
        }

        function Color(r, g, b) {
            this.r = r;
            this.g = g;
            this.b = b;
            this.coll = new Array(r, g, b);
            this.valid = cVerify(this.coll);
            this.text = cText(this.coll);
            this.bg = cText(this.coll);
        }

        function cVerify(c) {
            var valid = 'n';
            if ((!isNaN(c[0])) && (!isNaN(c[1])) && (!isNaN(c[2]))) { valid = 'y' }
            return valid;
        }

        function cText(c) {
            var result = '';
            var d = 1;
            if (colType == 'rgbp') { d = 2.55 }
            for (k = 0; k < 3; k++) {
                val = Math.round(c[k] / d);
                piece = val.toString(base);
                if (colType == 'hex' && piece.length < 2) { piece = '0' + piece; }
                if (colType == 'rgbp') { piece = piece + '%' };
                if (colType != 'hex' && k < 2) { piece = piece + ','; }
                result = result + piece;
            }
            if (colType == 'hex') { result = '#' + result.toUpperCase(); }
            else { result = 'rgb(' + result + ')'; }
            return result;
        }

        function colorParse(c, t) {
            var m = 1;
            c = c.toUpperCase();
            col = c.replace(/[\#rgb\(]*/, '');
            if (t == 'hex') {
                if (col.length == 3) {
                    a = col.substr(0, 1);
                    b = col.substr(1, 1);
                    c = col.substr(2, 1);
                    col = a + a + b + b + c + c;
                }
                var num = new Array(col.substr(0, 2), col.substr(2, 2), col.substr(4, 2));
                var base = 16;
            } else {
                var num = col.split(',');
                var base = 10;
            }
            if (t == 'rgbp') { m = 2.55 }
            var ret = new Array(parseInt(num[0], base) * m, parseInt(num[1], base) * m, parseInt(num[2], base) * m);
            return (ret);
        }

        function colorPour(pt, n) {
            var textObj = document.getElementById(pt + n.toString());
            var colObj = document.getElementById(pt.substring(0, 1) + n.toString());
            if (pt == 'col') { temp = ends[n] } else { temp = palette[n] }
            if (temp.valid == 'y') {
                textObj.value = temp.text;
                colObj.style.backgroundColor = temp.bg;
            }
        }

        function colorStore(n) {
            var inVal = 'col' + n.toString();
            var inCol = document.getElementById(inVal).value;
            var c = colorParse(inCol, colType);
            ends[n] = new Color(c[0], c[1], c[2]);
            if (ends[n].valid == 'y') { colorPour('col', n) }
        }

        function stepCalc() {
            var steps = parseInt(document.getElementById('steps').value) + 1;
            step[0] = (ends[1].r - ends[0].r) / steps;
            step[1] = (ends[1].g - ends[0].g) / steps;
            step[2] = (ends[1].b - ends[0].b) / steps;
        }

        function mixPalette() {
            var steps = parseInt(document.getElementById('steps').value);
            var count = steps + 1;
            palette[0] = new Color(ends[0].r, ends[0].g, ends[0].b);
            palette[count] = new Color(ends[1].r, ends[1].g, ends[1].b);
            for (i = 1; i < count; i++) {
                var r = (ends[0].r + (step[0] * i));
                var g = (ends[0].g + (step[1] * i));
                var b = (ends[0].b + (step[2] * i));
                palette[i] = new Color(r, g, b);
            }
            for (j = count + 1; j < 12; j++) {
                palette[j].text = '';
                palette[j].bg = 'white';
            }
        }

        function drawPalette() {
            stepCalc();
            mixPalette();
            for (i = 0; i < 12; i++) {
                colorPour('pal', i);
            }
        }

        function setCursor(n) {
            cursor = n;
            var obj1 = document.getElementById('col0');
            var obj2 = document.getElementById('col1');
            obj1.style.backgroundColor = '';
            obj2.style.backgroundColor = '';
            if (cursor >= 0 && cursor <= 1) {
                document.getElementById('col' + cursor).style.backgroundColor = '#FF9';
            }
        }

        function colorIns(c) {
            var obj = document.getElementById('col' + cursor);
            var result = colorParse(c, 'hex');
            ends[cursor] = new Color(result[0], result[1], result[2]);
            obj.value = ends[cursor].text;
            if (ends[cursor].valid == 'y') { colorPour('col', cursor) }
        }

        function setType(inp) {
            colType = inp;
            if (inp == 'hex') { base = 16; } else { base = 10; }
            for (i = 0; i < 2; i++) {
                var obj = document.getElementById('col' + i);
                if (ends[i].valid == 'y') {
                    ends[i] = new Color(ends[i].r, ends[i].g, ends[i].b);
                    obj.value = ends[i].text;
                }
            }
            drawPalette();
            document.getElementById('hex').className = '';
            document.getElementById('rgbd').className = '';
            document.getElementById('rgbp').className = '';
            document.getElementById(inp).className = 'coltype';
        }

        function init(inp) {
            if (!inp) {
                obj = GetElementsWithClassName('a', 'coltype');
                inp = obj[0].id;
            }
            document.getElementById(inp).className = 'coltype';
            for (i = 0; i < 2; i++) {
                ends[i] = new Color;
                document.getElementById('col' + i).value = '';
                document.getElementById('c' + i).style.background = 'white';
            }
            for (j = 0; j < 12; j++) {
                palette[j] = new Color;
                document.getElementById('pal' + j).value = '';
                document.getElementById('p' + j).style.background = 'white';
            }
            document.getElementById('steps').value = '0';
            document.getElementById('col0').focus();
        }
    </script>
</head>
<body onload="init('hex');" class="cf">
    <form onsubmit="return false;" class="unit size1of2">
    <h1>Eric Meyer&rsquo;s Web Color Blender</h1>
    <p class="intro ">  This is <a href="http://custom-color-blender.googlecode.com/svn/color-blender-fork-custom.html" title="port of Eric Meyer&rsquo;s Web Color Blending tool on Google Code">a port</a> <a href="https://github.com/azcoov/color-blender/blob/master/color-blender.html" title="port of Eric Meyer&rsquo;s Web Color Blending tool on github">from a port</a>,  of my favorite html color blending tool: <a href="http://meyerweb.com/eric/tools/color-blend/" title="Web Color Blending tool: the original from the one and only Eric Meyer">Color Blender</a>. <br/>I use this tool all the time, and just made things a bit nicer for my spoiled eyes. </p>
    <table id="main">
        <tr class="valign-top">
            <td id="uicell">
                <table id="input">
                    <tr>
                        <th>
                            Format
                        </th>
                        <td colspan="2">
                            <a onclick="setType('hex');" id="hex">Hex</a> <a onclick="setType('rgbd');" id="rgbd">
                                RGB</a> <a onclick="setType('rgbp');" id="rgbp">RGB%</a>
                        </td>
                    </tr>
                    <tr>
                        <th id="l1">
                            Color 1
                        </th>
                        <td class="col">
                            <input type="text" id="col0" size="19" onblur="colorStore('0');" onfocus="setCursor(0);" />
                        </td>
                        <td class="pal" id="c0">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <th id="l2">
                            Color 2
                        </th>
                        <td class="col">
                            <input type="text" id="col1" size="19" onblur="colorStore('1');" onfocus="setCursor(1);" />
                        </td>
                        <td class="pal" id="c1">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Midpoints
                        </th>
                        <td>
                            <select id="steps">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </td> 
                        <td>
                        </td>
                    </tr>
                    <tr id="gobuttons">
                        <td>
                        </td>
                        <td>
                            <a onclick="drawPalette();">blend</a>
                        </td>
                        <td>
                            <a onclick="init();">clear</a>
                        </td>
                    </tr>
                </table>
                <table id="output">
                    <tr>
                        <th>
                            Palette
                        </th>
                        <td class="text">
                            <input type="text" id="pal0" size="19" />
                        </td>
                        <td class="pal" id="p0">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td class="text">
                            <input type="text" id="pal1" size="19" />
                        </td>
                        <td class="pal" id="p1">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td class="text">
                            <input type="text" id="pal2" size="19" />
                        </td>
                        <td class="pal" id="p2">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td class="text">
                            <input type="text" id="pal3" size="19" />
                        </td>
                        <td class="pal" id="p3">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td class="text">
                            <input type="text" id="pal4" size="19" />
                        </td>
                        <td class="pal" id="p4">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td class="text">
                            <input type="text" id="pal5" size="19" />
                        </td>
                        <td class="pal" id="p5">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td class="text">
                            <input type="text" id="pal6" size="19" />
                        </td>
                        <td class="pal" id="p6">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td class="text">
                            <input type="text" id="pal7" size="19" />
                        </td>
                        <td class="pal" id="p7">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td class="text">
                            <input type="text" id="pal8" size="19" />
                        </td>
                        <td class="pal" id="p8">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td class="text">
                            <input type="text" id="pal9" size="19" />
                        </td>
                        <td class="pal" id="p9">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td class="text">
                            <input type="text" id="pal10" size="19" />
                        </td>
                        <td class="pal" id="p10">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td class="text">
                            <input type="text" id="pal11" size="19" />
                        </td>
                        <td class="pal" id="p11">
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
            <td id="watercell">
                <script type="text/javascript">
                    var colors = new Array('00', '33', '66', '99', 'CC', 'FF');
                    document.write('<table cellspacing="0" id="grid">');
                    for (i = 5; i >= 0; i--) {
                        for (j = 5; j >= 0; j--) {
                            document.write('<tr>');
                            for (k = 5; k >= 0; k--) {
                                var col = colors[i] + colors[j] + colors[k];
                                document.write('<td style="background: #' + col + ';"><a href="javascript:colorIns(\'#' + col + '\');"><\/a><\/td>');
                            }
                            document.write('<\/tr>');
                        }
                    }
                    document.write('<\/table>');
                </script>
            </td>
            <td id="textcell">    <!-- 
                <ul>
                    <li>Pick a color value format, input two <strong>valid</strong> CSS color values in
                        the format you chose, and pick the number of midpoints you'd like to see. The palette
                        will show the colors you input as well as the requested number of midpoint colors,
                        and the values of those colors.</li>
                    <li>All numbers are rounded to the nearest integer.</li>
                    <li>Clicking on a square in the "waterfall" display will fill in the appropriate value
                        for whichever input is highlighted.</li>
                    <li>Switching between value formats will translate whatever values are in place.</li>
                    <li>"Clear" removes all values and colors, but does not change the current value format.</li>
                    <li>If you'd like to have the Color Blender for offline use, just view source and save
                        to your hard drive.</li>
                </ul>  --> 
            </td>  
        </tr> 
    </table>
    </form>

    <div class="textcell unit size1of2"> 
                <ul>
                    <li>Pick a color value format, input two <strong>valid</strong> CSS color values in
                        the format you chose, and pick the number of midpoints you'd like to see. The palette
                        will show the colors you input as well as the requested number of midpoint colors,
                        and the values of those colors.</li>
                    <li>All numbers are rounded to the nearest integer.</li>
                    <li>Clicking on a square in the "waterfall" display will fill in the appropriate value
                        for whichever input is highlighted.</li>
                    <li>Switching between value formats will translate whatever values are in place.</li>
                    <li>"Clear" removes all values and colors, but does not change the current value format.</li>
                    <li>If you'd like to have the Color Blender for offline use, just view source and save
                        to your hard drive.</li>
                </ul> 
    </div>

    <div id="footer" class="unit group">
      <!--  <img alt="Creative Commons License" border="0" src="http://creativecommons.org/images/public/somerights.gif"> -->
        <p>
            <br>
            The Color Blender is licensed under a Creative Commons <a href="http://creativecommons.org/licenses/by-sa/1.0/"
                rel="license">Attribution-ShareAlike 1.0</a> License.
        </p>
        <p>
            This tool is provided without warranty, guarantee, or much in the way of explanation.
            Note that use of this tool may or may not crash your browser, lock up your machine,
            erase your hard drive, or e-mail those naughty pictures you hid in the Utilities
            folder to your mother. Don't blame me if anything bad happens to you, because it's
            actually the aliens' fault. The code expressed herein is solely that of the author,
            and he's none too swift with the JavaScript, if you know what we mean, so it's likely
            to cause giggle fits in anyone who knows what they're doing. Not a flying toy. Thank
            you for playing. Insert coin to continue.
        </p>
    </div>
</body>
</html>
